import React, { useEffect, useState } from 'react';
import './record.scss';
import { getMyRecord, getInterviewList } from "../../../../api/myRecord"
import { Table } from 'antd';
import { Input } from 'antd';
import { Button } from 'antd';
const { Column } = Table;
const Record = (props) => {
    const [topCur, setTopCur] = useState(0)
    const [bottomCur, setBottomCur] = useState(0)
    const [list, setList] = useState([])
    const [stau] = useState([
        {
            id: 1,
            name: "通过"
        },
        {
            id: 2,
            name: "未通过"
        },
        {
            id: 3,
            name: "不确定"
        }
    ])
    const [itemList, setItemList] = useState([])
    const getsomething = async() => {
        let res = await getMyRecord()
        setList(res.data.data)
        let result = await getInterviewList()
        setItemList(result.data.rows)
    }
    useEffect(() => {
        getsomething()
    }, [])
    async function inputValue(e) {
        let result = await getInterviewList({ searchTitle: e.target.value })
        setItemList(result.data.rows)
    }
    async function getList(id, index) {
        setTopCur(index + 1)
        let result = await getInterviewList({ majorId: id })
        setItemList(result.data.rows)
    }
    async function getAllList() {
        setTopCur(0)
        let result = await getInterviewList({})
        setItemList(result.data.rows)
    }
    async function getAllList2() {
        setBottomCur(0)
        let result = await getInterviewList({})
        setItemList(result.data.rows)
    }
    const getListByStatus = async (id, index) => {
        setBottomCur(index + 1)
        let result = await getInterviewList({ status: id })
        setItemList(result.data.rows)
    }
    const jumpAdd = () => {
        props.history.push("/home/addrecord")
    }
    const jumpDetail = (id) => {
        props.history.push("/home/detailrecord/" + id)
    }
    return (
        <div id="record">
            <div className="top">
                <div className="topItem">
                    <p>专业：</p>
                    <div>
                        <p className={topCur === 0 ? "active" : ""} onClick={() => {
                            getAllList()
                        }}>全部</p>
                        {
                            list && list.map((item, index) => {
                                return <p key={item.id} className={index + 1 === topCur ? "active" : ""} onClick={() => {
                                    getList(item.id, index)
                                }}>{item.name}</p>
                            })
                        }
                    </div>
                </div>
                <div className="topItem">
                    <p>面试结果:</p>
                    <div>
                        <p className={bottomCur === 0 ? "active" : ""} onClick={() => {
                            getAllList2()
                        }}>全部</p>
                        {
                            stau && stau.map((item, index) => {
                                return <p className={index + 1 === bottomCur ? "active" : ""} key={item.id} onClick={() => {
                                    getListByStatus(item.id, index)
                                }}>{item.name}</p>
                            })
                        }
                    </div>
                </div>
            </div>

            <div className="bottom">
                <div className="bottomItem" name="searchTitle" onInput={(e) => {
                    inputValue(e)
                }}>
                    <Input placeholder="搜索岗位/公司名称" />
                    <Button type="primary" onClick={() => {
                        jumpAdd()
                    }}>+添加新的面试记录</Button>
                </div>
                <Table dataSource={itemList}>
                    <Column title="岗位名称" dataIndex="stationName" key="interviewId"
                        render={(text, record) => <a onClick={() => {
                            jumpDetail(record.interviewId)
                        }}>{text}</a>}
                    />
                    <Column title="公司名称" dataIndex="companyName" key="interviewId" />
                    <Column title="面试时间" dataIndex="interviewTime" key="interviewId" />
                    <Column title="面试官" dataIndex="intervierManagement" key="interviewId" />
                    <Column title="专业" dataIndex="majorName" key="interviewId" />
                    <Column title="提交人" dataIndex="commitName" key="interviewId" />
                    <Column title="面试结果" dataIndex="status" key="interviewId" render={(text)=>{
                    if(text===0) return <span>不确定</span>
                    if(text===1) return <span style={{color:"#0f0"}}>通过</span>
                    if(text===2) return <span style={{color:"red"}}>未通过</span>
                }} />
                    <Column title="录音文件" dataIndex="issoundrecord" key="interviewId" render={text => {
                        return text === 0 ? <span>无</span> : <span>有</span>
                    }} />
                </Table>
            </div>
        </div>
    );
};

export default Record;